<template>
	<view class="page-realName">
		<view style="width: 100%">
			<xzy-navbar bgColor="transform" leftIconColor="#fff">
				<template #center>
					<text style="color: #fff;">实名认证</text>
				</template>
			</xzy-navbar>
		</view>
		<view class="top">
			<view class="top-title">
				您已通过实名认证
			</view>
			<view class="top-text">
				更加真实，更受欢迎
			</view>
		</view>
		<view class="cell-card">
			<view class="cell-item">
				<view class="title">
					姓名
				</view>
				<view class="value">
					{{relNameInfo.userName}}
				</view>
			</view>
			<uv-line></uv-line>
			<view class="cell-item">
				<view class="title">
					身份证号
				</view>
				<view class="value">
					{{desensitizeIdCard(relNameInfo.cardNo)}}
				</view>
			</view>
			<uv-line></uv-line>
			<view class="cell-item">
				<view class="title">
					认证日期
				</view>
				<view class="value">
					{{relNameInfo.createTime}}
				</view>
			</view>
		</view>
		<!-- v-if="relNameInfo.isCertificateAgain===1" -->
		<view class="btn_box" v-if="relNameInfo.isCertificateAgain===1">
			<view class="btn" @click="verifyMobileRef.open()">更换实名认证</view>
		</view>
		<xzy-modal title="验证手机号" mode="bottom" ref="verifyMobileRef" :is-show-btn="true" @submit="requestWithdrawSubmit">
			<view class="ipt-box">
				<view class="ipt-item">
					<uv-icon name="phone" color="#7c7e81" size="20"></uv-icon>
					<view style="margin:0 0 10rpx 0;font-size: 26rpx;">{{ phoneNumberMask(globalStore.userInfo?.phone) }}
					</view>
				</view>
				<view class="ipt-item">
					<uv-input type="number" placeholder="请输入验证码" prefixIcon="chat" border="none" v-model="smsCode">
						<template v-slot:suffix>
							<uv-code ref="uCodeRef" @change="codeChange($event,1)" :seconds="seconds"></uv-code>
							<view @click="getCode(1)">{{codeTips}}</view>
						</template>
					</uv-input>
				</view>
			</view>
		</xzy-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		checkStr,
		desensitizeIdCard,
		phoneNumberMask
	} from '@/utils'

	import {
		GetRealAuth,
		CheckWithdrawApi,
	} from '@/api/modules/mine'
	import {
		SendSmsCode,
		RemoveRealName
	} from '@/api/modules/system';
	import useStore from '@/stores'
	const verifyMobileRef = ref()
	const uCodeRef = ref()
	const smsCode = ref("") //	短信验证码
	const seconds = ref(60)
	const codeTips = ref("") //	短信验证码提示文字
	const {
		globalStore
	} = useStore()
	//	倒计时
	function codeChange(text, type) {
		if (type === 1) {
			codeTips.value = text;
		}
	}
	// 	获取验证码
	function getCode(type) {
		if (uCodeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			SendSmsCode({
				phone: globalStore.userInfo?.phone,
				isRegister: 1
			}).then(res => {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
				uCodeRef.value.start();
			})
		} else {
			uni.$uv.toast('倒计时结束后再发送');
		}
	}

	const requestWithdrawSubmit = () => {
		CheckWithdrawApi({
			phone: globalStore.userInfo?.phone,
			smsCode: smsCode.value
		}).then(res => {
			verifyMobileRef.value.close()
			uni.navigateTo({
				url: '/pages/system/certification'
			})
		})
	}
	const relNameInfo = ref({})

	function getRealAuthInfo() {
		GetRealAuth({
			userId: globalStore.userInfo.id
		}).then(res => {
			relNameInfo.value = res.data
		})
	}
	onShow(() => {
		getRealAuthInfo()
	})
</script>

<style lang="scss">
	.page-realName {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f7f8fb;
		background-image: url('https://static.tianwandailian.cn/static/server/realname_bg.png');
		background-repeat: no-repeat;
		background-size: contain;

		.top {
			margin: 154rpx 0 0 52rpx;

			.top-title {
				width: 320rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 10rpx;
			}

			.top-text {
				width: 252rpx;
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.cell-card {
			margin: 0 20rpx;
			width: calc(100% - 40rpx);
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 80rpx;

			.cell-item {
				display: flex;
				justify-content: space-between;
				padding: 32rpx;
			}
		}

		.btn_box {
			width: 100%;
			height: 196rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;

			.btn {
				width: 686rpx;
				height: 80rpx;
				background: #6E68E9;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #ffffff;
				font-size: 28rpx;
			}
		}
	}

	.ipt-box {
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);

		.ipt-item {
			margin-bottom: 20rpx;
			background: #F7F8FB;
			height: 88rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
		}

	}
</style>